iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
AI & Data

AI 營養師 + Web3 數位健康護照系列 第 19

Day19. 規劃 AI 營養顧問的人性化 UI 頁面 Ep5:加入 Google Gemini API,分析使用者提供的資料

  • 分享至 

  • xImage
  •  

今天的任務就是要將使用者在 index.html 提供的資料,經過 Gemini 分析後,顯示在 result.html

目前的專案架構:

AI_Nutri_Project/
├── app.py                # Flask 應用程式主程式
├── credentials.json      # Google OAuth 憑證
└── templates/
    ├── index.html        # 輸入/首頁 UI
    └── results.html      # 分析結果 UI

由於 app.py 目前已經有個 Google Fit 了,如果 Gemini 再搬進去的話,有點兒擠...

再增加一個 services 資料夾(服務層),與 Google Fit 相關的寫在 google_fit_service.py;與 Google Gemini 相關的寫在 gemini_service.py

AI_Nutri_Project/
├── app.py                 # Flask 應用程式主程式
├── credentials.json       # Google OAuth 憑證
├── services/              # 服務層
│   ├── gemini_service.py  # 處理 Gemini API 呼叫、JSON 處理
│   └── google_fit_service.py # 處理 Google Fit OAuth & 數據獲取
│
└── templates/             # UI

再增加一個 config 資料夾(配置相關檔案),可以用來放 Gemini 的 Api Key,以及 Google Fit 的憑證 credentials.json

AI_Nutri_Project/
├── app.py                 # Flask 應用程式主程式
├── config/                # 配置相關檔案
│   ├── .env               # (包含 GEMINI_API_KEY)
│   ├── aiconfig.json      # 設定檔
│   └── credentials.json   # Google Fit 憑證
│
├── services/              # 服務層
└── templates/             # UI

開工~

第一步:安裝和配置環境依賴

請確認目前的 Python 環境中安裝了所有必要的函式庫:

pip install google-genai pillow python-dotenv

第二步:設定 API 金鑰 (.env & app.py)

  1. 在 .env 檔案中加入 GEMINI_API_KEY:
# .env
GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
  1. 修改 app.py 檔案(載入環境變數並設定配置):
import os
from dotenv import load_dotenv
from flask import Flask

load_dotenv() # 載入 .env 檔案

def create_app():
    app = Flask(__name__)
    # 將 API Key 載入到 app.config 中
    app.config['GEMINI_API_KEY'] = os.environ.get("GEMINI_API_KEY") 
    # ... 
    return app

第三步:編輯 gemini_service.py 檔案

 #先欠著~(陷入 Json 地獄中...)

第四步:執行專案

  1. 開啟終端機,確認是在專案根目錄下
  2. 下指令 python app.py

https://ithelp.ithome.com.tw/upload/images/20250929/20129220VtCJkAggla.jpg

(還在努力調整資料格式中...)


上一篇
Day18. 規劃 AI 營養顧問的人性化 UI 頁面 Ep4:Vibe Coding 有風險,寫程式需謹慎,部署前請詳閱資安說明書。
下一篇
Day20. 用 MCP(模組上下文協議)協作覺得新潮嗎?春秋戰國時代早已劇透了現代人的日常!
系列文
AI 營養師 + Web3 數位健康護照27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言